<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>DOM操作</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
			}
			.red{
				background-color: #f00;
			}
			
			.border{
				border: 2px solid #000;
			}
			
		</style>
		
		<script src="js/jquery-1.12.4.js"  type="text/javascript">
			
		</script>
	</head>
	<body>
		<div class=""></div>
		<script type="text/javascript">
			// 直接操作CSS,我们会
			// 直接操作CSS时比较笨重的方式,更好的方式时操作class	
			// 	直接操作CLASS会遇到:
			// 	1. 添加class
			// 	2. 知道是否某个CLASS已经存在
			// 	3. 删除CLASS
			// 
			// 原生JS？
			// 	获得class 属性的字符串,然后用indexOf 是不是-1, 前后加空格
			// 	class="cls1 cls2" ==> split, 数组, 用空格分隔
			
			
			// jQuery: addClass, removeClass, hasClass,
			$(function(){
				var $div = $('body>div:first');
				$div.addClass('border')
					.addClass('red');
				// $('body>div:first').addClass('red');
				
				$div.removeClass('red');
				
				console.log($div.hasClass('border'));
			});
				
		</script>
	</body>
</html>
